import React, { Component } from "react";
import styles from "./style.less";
import Request, { Delete, Get } from "./../../utils/request";
import { EditSOutline } from 'antd-mobile-icons'
import { QrReader } from 'react-qr-reader';
import { Modal } from "antd-mobile";
class Page extends Component {
  state = {
    userInfo: {},
    list: [],
    saoma: false,
    decodedText: "",
    decodedResult: "",
    data: '',
  };
  componentDidMount() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    console.log(userInfo);
    this.setState({
      userInfo: userInfo
    });
    this.getList();

  }
  getList = () => {
    Request("/mss/lottery/exchange/query", {
      prize_states: ["已使用"],
      k: "",
      count: 20000,
      offset: 0,
      uid: "65018368986468662cb0a71f",
      from: "mini"
    }).then(res => {
      console.log(res);
      this.setState({
        list: res?.data?.data || []
      });
    });
  };
  scan = () => {
    this.setState({
      saoma: true
    }, () => {
      setTimeout(() => {
        // this.handleFullScreen();
      }, 200);

    })

  };
  handleFullScreen = () => {
    const qrReader = this.qrReaderRef.current;
    if (qrReader) {
        const video = qrReader.getVideoInput();
        if (video) {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { /* Firefox */
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                video.msRequestFullscreen();
            }
        }
    }
}
  handleScan = (data) => {
    if (data) {
      console.log('扫描结果：', data);
      this.setState({ data: data, saoma: false }, () => {
        window.location.href = window.location.origin + window.location.pathname + "#/dj/" + data;
      })

      // 处理扫描到的数据
    }
  }
  handleError = err => {
    console.error('扫描错误：', err);
  };
  render() {
    const { text } = this.props;
    const { userInfo, list, saoma, decodedText, decodedResult, data } = this.state;
    return (
      <>
        {saoma ? (
          <div style={{ width: '100vw', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            
            <QrReader
              delay={300}
              constraints={{ facingMode: 'environment' }}
              style={{ width: '100vw',height: '100vh' }}
              videoContainerStyle={{ width: '100vw',height: '100vh',paddingTop: '0!important' }}
              onResult={(result, error) => {
                if (!!result) {
                  this.setState({ data: result.text, saoma: false }, () => {
                    window.location.href = window.location.origin + window.location.pathname + "#/dj/" + result.text;
                  })
                }

                if (!!error) {
                  console.info(error);
                }
              }}
            />
          </div>
        ) : (
          <div class={'container'}>
            <div class={'shopInfo'}>
              {userInfo?.shop?.name}
              {/* <image src={require('./edit.png')}></image> */}
              <EditSOutline
                onClick={() => {
                  window.location.href =
                    window.location.href.split("#")[0] + "#/user/sys";
                }}
                className={'anticon'}
              />
            </div>
            <div class={'hxdesc'}>已核销信息</div>
            <div class={'dhlb'}>
              {list.map((item, i) => {
                return (
                  <div key={i} class={'dhitem'}>
                    {item.phone}
                    <text class={'dhitem_use'}>使用了</text>
                    {item.prize.name}
                  </div>
                );
              })}
            </div>
            <div class={'scanWrap'} onClick={() => this.scan()}>
              <div className={'scan'}>扫码</div>

            </div>
          </div>
        )}
      </>
    );
  }
}

export default Page;
